<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="编辑订单"
    ></van-nav-bar>

    <!-- 报名内容 -->
    <div class="apply-online">
      <!-- 是否是本地 -->
      <div class="standFor">
        <div>驾驶人来源</div>
        <van-radio-group
          @change="choose"
          direction="horizontal"
          icon-size="14px"
          v-model="radio"
        >
          <van-radio name="1">本地</van-radio>
          <van-radio name="2">外地</van-radio>
        </van-radio-group>
      </div>

      <!-- 申请类型 -->
      <div class="ce_basic">
        <p>申请类型</p>
        <select v-model="type" class="ce_type">
          <option value="1">初次申请</option>
          <option value="2">增驾</option>
        </select>
      </div>

      <!-- 现有驾照 -->
      <div class="ce_basic">
        <p>现有驾照</p>
        <select v-model="drivingLicence" class="ce_type">
          <option value="A1">A1</option>
          <option value="A2">A2</option>
          <option value="A3">A3</option>
          <option value="B1">B1</option>
          <option value="B2">B2</option>
          <option value="C1">C1</option>
          <option value="C2">C2</option>
          <option value="C3">C3</option>
          <option value="C4">C4</option>
          <option value="D">D</option>
          <option value="E">E</option>
          <option value="F">F</option>
          <option value="M">M</option>
          <option value="N">N</option>
          <option value="P">P</option>
        </select>
      </div>
      <!-- end -->

      <!-- 选择驾校 -->
      <div class="ce_basic">
        <p>选择驾校</p>

        <select v-model="ChooseSt" class="ce_type" @blur="drivingTest">
          <option
            v-for="(item, index) in drivingSchool"
            :key="index"
            :value="item.id"
            >{{ item.name }}</option
          >
          <!-- <option value="9">燕赵驾校</option> -->
        </select>
      </div>
      <!-- end -->

      <!-- 选择教练 -->
      <div class="ce_basic">
        <p>选择教练</p>
        <!--  @blur="cardFocus" -->
        <select v-model="coach" class="ce_type">
          <option
            v-for="(item, index) in trainerList"
            :key="index"
            :value="item.code"
            >{{ item.name }}</option
          >
        </select>
      </div>
      <!-- end -->

      <!-- 准驾车型 -->
      <div class="ce_basic">
        <p>准驾车型</p>

        <select @blur="gradeType" v-model="override" class="ce_type">
          <option
            v-for="(item, index) in examLicense"
            :key="index"
            :value="item"
            >{{ item }}</option
          >
        </select>
      </div>
      <!-- end -->

      <!-- 班型 -->
      <div class="ce_basic">
        <p>班型</p>

        <select v-model="banks" class="ce_type">
          <option
            v-for="(item, index) in banksList"
            :key="index"
            :value="item.id"
            >{{ item.stageName }}</option
          >
        </select>
      </div>
      <!-- end -->

      <!-- 姓名 -->
      <van-cell-group>
        <van-field
          v-model="text"
          label="姓名"
          placeholder="请输入姓名"
        ></van-field>
      </van-cell-group>
      <!-- end -->

      <!-- 国籍 -->
      <div class="ce_basic">
        <p>国籍</p>

        <select v-model="nationality" class="ce_type">
          <option
            v-for="(item, index) in nationalitys"
            :key="index"
            :value="item.dictValue"
            >{{ item.remarks }}</option
          >
        </select>
      </div>

      <!-- 证件类型 -->
      <div class="ce_basic">
        <p>证件类型</p>
        <select v-model="papersType" class="ce_type">
          <option value="1">身份证</option>
          <option value="2">护证</option>
          <option value="3">港澳台身份证</option>
          <option value="4">军官证</option>
        </select>
      </div>
      <!-- end -->

      <!-- 证件号码 -->
      <van-cell-group>
        <van-field
          @blur="shiftOut"
          label="证件号码"
          v-model="IDCard"
          placeholder="请输入证件号码"
        ></van-field>
      </van-cell-group>
      <!-- end -->

      <!-- 性别 -->
      <div class="ce_basic">
        <p>性别</p>

        <select v-model="set" class="ce_type">
          <option value="0">男</option>
          <option value="1">女</option>
        </select>
      </div>
      <!-- end -->

      <!-- 出生年月 -->
      <!-- @click="showData" -->

      <van-cell is-link @click="showData">
        <template #title>
          <div class="title-census">
            <p>出生年月</p>
            <div>{{ years }}</div>
          </div>
        </template>
      </van-cell>
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-datetime-picker
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="CallOff"
          @confirm="ascertain"
          v-model="currentDate"
        />
      </van-popup>

      <!-- 身份证地址 -->
      <van-cell-group>
        <van-field
          v-model="site"
          label="身份证地址"
          placeholder="请输入身份证地址：省、市、区/镇"
        ></van-field>
      </van-cell-group>
      <!-- end -->

      <!-- 居住地 -->
      <!-- @click="showPopup" -->
      <van-cell-group>
        <van-field
          v-model="building"
          label="居住地"
          placeholder="请输入身份证地址：省、市、区/镇"
        ></van-field>
      </van-cell-group>

      <!-- 居住证号 -->
      <van-cell-group v-if="standFor">
        <van-field
          v-model="residencePermit"
          type="digit"
          label="居住证号"
          placeholder="请输入居住证号"
        />
      </van-cell-group>

      <!-- end -->

      <!-- 居住证签发时间 -->
      <div>
        <van-cell is-link @click="cardSigner">
          <template #title>
            <div class="title-census">
              <p>居住证签发时间</p>
              <div>{{ cardTime }}</div>
            </div>
          </template>
        </van-cell>

        <van-popup
          v-model="signer"
          round
          position="bottom"
          :style="{ height: '40%' }"
        >
          <van-datetime-picker
            v-model="issuingAuthority"
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="residence"
            @confirm="residenceTime"
          />
        </van-popup>
      </div>
      <!-- end -->

      <!-- 暂住证 -->
      <!-- @click="showData" -->
      <div>
        <van-cell is-link @click="uptown">
          <template #title>
            <div class="title-census">
              <p>暂住证到期时间</p>
              <div>{{ stayExpire }}</div>
            </div>
          </template>
        </van-cell>

        <van-popup
          v-model="residentialTome"
          round
          position="bottom"
          :style="{ height: '40%' }"
        >
          <van-datetime-picker
            type="date"
            v-model="dataccc"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="temporary"
            @confirm="temporaryTime"
          />
        </van-popup>
      </div>
      <!-- end -->

      <!-- 报名时间 -->
      <!-- @click="showData" -->
      <!-- <van-cell is-link @click="applyTime">
        <template #title>
          <div class="title-census">
            <p>报名时间</p>
            <div>{{signUpTime}}</div>
          </div>
        </template>
      </van-cell>

      <van-popup round v-model="signUp" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          @confirm="registerFor"
          type="year-month"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>-->
      <!-- end -->

      <!-- 招生来源 -->
      <div class="ce_basic">
        <p>招生来源</p>
        <select v-model="source" class="ce_type">
          <option value="1">自主报名</option>
          <option value="3">老学员介绍</option>
          <option value="4">宣传彩页</option>
          <option value="5">代理</option>
          <option value="6">电视广告</option>
          <option value="7">公交广告</option>
          <option value="8">网络推广</option>
          <option value="9">其它</option>
        </select>
      </div>
      <!-- end -->

      <!-- 介绍人 sponsors -->
      <div class="ce_basic">
        <p>介绍人</p>
        <select v-model="sponsor" class="ce_type">
          <option
            v-for="(item, index) in sponsors"
            :key="index"
            :value="item.id"
            >{{ item.name }}</option
          >
        </select>
      </div>
      <!-- end -->

      <!-- 备注 -->
      <van-field
        v-model="message"
        rows="1"
        autosize
        label="备注"
        type="textarea"
        placeholder="请输入备注"
      />
      <!-- end -->
      <!-- 报名按钮 -->
      <div class="ao_button" @click="payment">报名</div>
      <!-- end -->
      <!-- 弹出层 -->
      <!-- <van-cell is-link>展示弹出层</van-cell> -->
      <van-popup
        @click-overlay="padlock"
        class="popups-popping"
        v-model="popups"
      >
        <div class="ao-message">
          <div class="personal-details">个人信息</div>
          <div>
            <div>
              <p>姓名：</p>
              <div>{{ text }}</div>
            </div>
            <div>
              <p>性别：</p>
              <div>{{ set == "0" ? "男" : "女" }}</div>
            </div>
            <div>
              <p>身份证：</p>
              <div>{{ IDCard }}</div>
            </div>
            <div>
              <p>手机号：</p>
              <div>{{ phone }}</div>
            </div>
          </div>

          <div class="personal-details">驾校信息</div>
          <div>
            <div>
              <p>驾校名称：</p>
              <div>{{ SchoolName }}</div>
            </div>
            <div>
              <p>准驾车型：</p>
              <div>{{ cardType }}</div>
            </div>
            <div>
              <p>班型：</p>
              <div>{{ Banks }}</div>
            </div>
            <div>
              <p>教练：</p>
              <div>{{ CoardName }}</div>
            </div>
          </div>
        </div>

        <div class="popping">
          <div>费用名称</div>
          <div>学时单价</div>
          <div>学时数量</div>
          <div>金额</div>
        </div>

        <div
          class="popping"
          v-for="(item, index) in costBreakdown"
          :key="index"
        >
          <div>{{ item.stageName }}</div>
          <div class="popping-detail">{{ item.classPrice }}</div>
          <div class="popping-detail">{{ item.classNum }}</div>
          <div class="popping-detail">{{ item.priceAll }}</div>
        </div>
        <div class="hourTotal">
          <div>总计</div>
          <div>{{ summations }}</div>
        </div>

        <!-- 按钮 -->
        <div class="button-pay">
          <div @click="abrogate">取消</div>
          <div @click="determine">确认</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
// 引入vant
import { Dialog } from "vant";
import { Toast } from "vant";
// import { Area } from "vant";
import {
  nativePlace,
  // applyOnline,
  instructor,
  // vehicleModel,
  Introducer,
  drivingSchool,
  opticalService,
  particulars,
  DetailsBanks,
  AllBanks
} from "../../../assets/js/api/apply";
import {
  RedactOrder,
  SettingUp,
  EditApply
} from "../../../assets/js/api/user.js";
export default {
  name: "ApplyOnline",
  data() {
    return {
      radio: "1", // 是否是本地户口
      fileList: [], //上传头像
      // profilePhoto: "",
      type: "", //申请类型
      override: "", //准驾车型
      banks: "", // 班型
      AllBanks: [], // 全部班型
      banksList: [], // 班型列表
      drivingLicence: "", // 现有驾照
      ChooseSt: "", //选择驾校
      coach: "", //选择教练
      text: "", // 姓名
      nationality: "1", //国籍
      papersType: "1", //证件类型
      IDCard: "", //证件号码
      set: "", // 性别
      show: false,
      Datamax: new Date(),
      years: "", //出生年月日
      //dataTome: "", //出生日期
      // age: "", // 年龄
      site: "", //地址
      residencePermit: "", //居住证号
      sponsor: "", // 介绍人
      source: "", //招生来源

      message: "", // 备注
      building: "", //  居住地
      residential: false, //居住地选择
      standFor: true, //按照是否是外来人员选择
      // 户籍地联动
      // census: false,
      // 出生日期
      minDate: new Date(1950, 1, 1),
      maxDate: new Date(2120, 12, 30),
      dataccc: new Date(),
      // currentDate: "",
      currentDate: new Date(),
      signer: false, //居住证日期是否显示
      issuingAuthority: new Date(),
      cardTime: "", // 居住证签打时间
      residentialTome: false, //暂住证
      stayExpire: "", //暂住证到期

      nationalitys: [], //国籍

      // 驾校
      drivingSchool: [],
      trainerList: [], // 教练列表

      examLicense: [], // 驾照类型
      issuingTime: "",
      sponsors: [], // 介绍人下拉框
      popups: false, // 班型明细弹出接口
      costBreakdown: [], //费用明细
      SchoolName: "", //驾校名字
      cardType: "", //车型
      Banks: "", // 班型
      CoardName: "", // 教练名字
      summations: 0, // 费用总和
      phone: "" // 用户电话
    };
  },

  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });

    drivingSchool().then(res => {
      // console.log(res.data);
      this.drivingSchool = res.data;

      // 教练列表
      // console.log(this.ChooseSt);
    });
    SettingUp().then(res => {
      this.phone = res.data.phonenumber;
      // console.log(res.data.phonenumber);
    });

    RedactOrder().then(res => {
      // console.log(res);
      this.radio = res.data.jsrly;
      this.type = res.data.ywlx;
      this.drivingLicence = res.data.yjcx;
      this.ChooseSt = res.data.jgbh; //选择驾校
      this.coach = res.data.yxjl;
      this.override = res.data.bmcx;
      this.banks = res.data.bz;
      this.text = res.data.name;
      this.nationality = res.data.nationality;
      this.IDCard = res.data.idcard;
      this.papersType = res.data.cardtype;
      this.set = res.data.sex;
      this.years = res.data.birth;
      this.site = res.data.idcardAddress;
      this.building = res.data.address;
      this.residencePermit = res.data.jzzcode;
      this.cardTime = res.data.jzzqftime;
      this.stayExpire = res.data.zzz;
      this.source = res.data.zsly;
      this.sponsor = res.data.jsr;
      this.message = res.data.remarks;
      opticalService(this.ChooseSt).then(res => {
        this.examLicense = res.data;
        instructor(this.ChooseSt).then(res => {
          this.trainerList = res.data;
          // console.log(this.trainerList);
        });
      });
      DetailsBanks(this.ChooseSt).then(res => {
        // console.log(res);
        this.AllBanks = res.data;
      });
      AllBanks(this.ChooseSt, this.override).then(res => {
        this.banksList = res.data;
      });
      // 介绍人
      Introducer(this.ChooseSt).then(res => {
        if (res.code == 0) {
          this.sponsors = res.data;
        }
      });
    });

    // 国籍接口
    nativePlace().then(res => {
      // console.log(res);
      this.nationalitys = res.data;
      // console.log(this.nationalitys);
    });
  },

  methods: {
    gradeType() {
      // console.log(
      //   `驾校id：${this.$route.params.lid},驾驶证型号：${this.override}`
      // );
      this.banksList = [];
      this.banks = "";
      for (let i = 0; i < this.AllBanks.length; i++) {
        if (this.override == this.AllBanks[i].stageType) {
          this.banksList.push(this.AllBanks[i]);
        }
      }
    },

    // 当选择驾校之后触发的函数
    drivingTest() {
      /**
       * 当再次选择驾校的时候，能清空对应的教练，车型，班型介绍人。以及对应的列表
       */
      this.coach = "";
      this.override = "";
      this.banks = "";
      this.sponsor = "";
      this.trainerList = [];
      this.sponsors = [];
      this.banksList = [];
      this.examLicense = [];
      instructor(this.ChooseSt).then(res => {
        this.trainerList = res.data;
        // console.log(this.trainerList);
      });

      opticalService(this.ChooseSt).then(res => {
        // console.log(this.ChooseSt);
        // console.log(res);
        this.examLicense = res.data;
        // console.log(this.examLicense);
      });
      DetailsBanks(this.ChooseSt).then(res => {
        // console.log(res);
        this.AllBanks = res.data;
      });

      Introducer(this.ChooseSt).then(res => {
        if (res.code == 0) {
          this.sponsors = res.data;
        }
      });
    },

    // 点击弹出框按确认执行

    // 支付跳转

    determine() {
      let obj = {
        jsrly: this.radio,
        ywlx: this.type,
        bmcx: this.override,
        yjcx: this.drivingLicence,
        jgbh: this.ChooseSt, // 驾校id
        yxjl: this.coach, // 教练id
        bz: this.banks, // 班型
        name: this.text,
        nationality: this.nationality,
        cardtype: this.papersType,
        idcard: this.IDCard,
        sex: this.set,
        birth: this.years,
        idcardAddress: this.site,
        address: this.building,
        jzzcode: this.residencePermit,
        jzzqftime: this.cardTime,
        zzz: this.stayExpire,
        zsly: this.source,
        jsr: this.sponsor,
        remarks: this.message,
        birthday: this.years,
        createBy: this.ChooseSt
      };

      EditApply(obj).then(res => {
        console.log(res);
        if (res.code == 501) {
          Toast.fail("重复报名");
          return;
        }
        if (res.code == 0) {
          this.popups = false;
          this.$router.go(-1);
        }
      });
    },

    payment() {
      if (this.radio == "1") {
        if (
          this.type === "" ||
          this.site === "" ||
          this.override === "" ||
          this.ChooseSt === "" ||
          this.banks === "" ||
          this.text === "" ||
          this.nationality === "" ||
          this.IDCard === "" ||
          this.papersType === "" ||
          this.set === "" ||
          this.years === ""
        ) {
          Dialog.alert({
            message: "请完善您信息"
            // theme: "round-button"
          }).then(() => {});
          return;
          // alert("请完善信息");
        }

        particulars(this.banks).then(res => {
          this.costBreakdown = res.data;
          let number = 0;
          for (let i = 0; i < this.costBreakdown.length; i++) {
            number += this.costBreakdown[i].priceAll;
            // console.log(number);
          }
          this.summations = number;
          // console.log(this.summations);
        });
      }
      if (this.radio == "2") {
        if (
          this.type === "" ||
          this.site === "" ||
          this.override === "" ||
          this.ChooseSt === "" ||
          this.banks === "" ||
          this.text === "" ||
          this.nationality === "" ||
          this.IDCard === "" ||
          this.papersType === "" ||
          this.set === "" ||
          this.years === "" ||
          this.site === "" ||
          this.building === "" ||
          this.residencePermit === "" ||
          this.cardTime === "" ||
          this.stayExpire === ""
        ) {
          Dialog.alert({
            message: "请完善您信息"
            // theme: "round-button"
          }).then(() => {});
          return;
          // alert("请完善信息");
        }

        particulars(this.banks).then(res => {
          this.costBreakdown = res.data;
          let number = 0;
          for (let i = 0; i < this.costBreakdown.length; i++) {
            number += this.costBreakdown[i].priceAll;
            // console.log(number);
          }
          this.summations = number;
          // console.log(this.summations);
        });
      }

      particulars(this.banks).then(res => {
        this.costBreakdown = res.data;
        // console.log(this.costBreakdown);
        let number = 0;
        for (let i = 0; i < this.costBreakdown.length; i++) {
          number += this.costBreakdown[i].priceAll;
          // console.log(number);
        }
        this.summations = number;
        // console.log(this.summations);
      });
      // 班型明细->驾校名字
      for (let i = 0; i < this.drivingSchool.length; i++) {
        if (this.ChooseSt == this.drivingSchool[i].id) {
          this.SchoolName = this.drivingSchool[i].name;
          // console.log(this.drivingSchool[i]);
        }
      }
      // 班型明细->车型
      for (let i = 0; i < this.examLicense.length; i++) {
        // console.log(this.examLicense[i]);
        if (this.override == this.examLicense[i]) {
          this.cardType = this.examLicense[i];
        }
        // if (this.this.examLicense[i] == this.examLicense[i]) {
        //   this.cardType = this.examLicense[i];
        // }
      }
      // 班型明细->班型
      for (let i = 0; i < this.banksList.length; i++) {
        if (this.banks == this.banksList[i].id) {
          this.Banks = this.banksList[i].stageName;
        }
      }
      // 班型明细->教练
      for (let i = 0; i < this.trainerList.length; i++) {
        if (this.coach == this.trainerList[i].code) {
          this.CoardName = this.trainerList[i].name;
        }
      }
      // 介绍人
      for (let i = 0; i < this.sponsors.length; i++) {
        if (this.sponsor == this.sponsors[i].jsr) {
          this.sponsor = this.sponsors[i].jsr;
        }
      }

      this.popups = true;
    },

    // 是否外来人口
    choose() {
      // console.log(this.radio);
      if (this.radio == "1") {
        this.standFor = true;
      } else {
        this.standFor = false;
      }
    },

    // 当失去焦点时，验证证件号码
    shiftOut() {
      // 判断当前用户选择了那种证件，进行相应的验证
      // 1：身份证，2：护照，3：港澳台身份证，4：军官证...
      this.set = "";
      this.years = "";

      if (this.papersType == "1") {
        if (
          !/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
            this.IDCard
          )
        ) {
          Toast.fail("格式错误");
          // 622726199710301351 272
          return;
        }

        let format = this.IDCard;
        // console.log("身份证" + format);
        let year = format.slice(6, 10);
        let month = format.slice(10, 12);
        let day = format.slice(12, 14);
        let set = format.slice(16, 17);
        if (set % 2 == 0) {
          this.set = 1;
        } else {
          this.set = 0;
        }
        // console.log("身份证年" + year, month);
        this.years = `${year}-${month}-${day}`;
        console.log(this.years);
      } else if (this.papersType == "2") {
        console.log("护照");
      } else if (this.papersType == "3") {
        console.log("港澳台身份证");
      } else if (this.papersType == "4") {
        console.log("军官证");
      }
    },

    // 居住证签发时间
    cardSigner() {
      this.signer = true;
    },

    // 暂住证
    uptown() {
      this.residentialTome = true;
    },

    registerFor() {
      this.signUp = false;
    },

    // 出生选择的显示
    showData() {
      this.show = true;
    },

    // 暂住证到期时间
    temporaryTime() {
      this.residentialTome = false;
      var myDate = this.dataccc;
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let day = myDate.getDate(); //获取当前日(1-31)
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      this.stayExpire = `${year}-${month}-${day}`;
    },
    temporary() {
      this.residentialTome = false;
    },

    // 居住证签发时间
    residenceTime() {
      this.signer = false;
      var myDate = this.issuingAuthority;
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let day = myDate.getDate(); //获取当前日(1-31)
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      this.cardTime = `${year}-${month}-${day}`;
    },
    residence() {
      this.signer = false;
      // issuingAuthority
    },

    // 日期选择确认的时候关闭弹窗
    CallOff() {
      this.show = false;
    },
    ascertain() {
      this.show = false;
      var myDate = this.currentDate;
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let day = myDate.getDate(); //获取当前日(1-31)
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      this.years = `${year}-${month}-${day}`;
      // console.log(`year${year},month:${month - 1},day:${day}`);
      // this.currentDate =
    },
    // 关闭弹窗执行的
    padlock() {
      // console.log("关闭弹窗");
      this.summation = [];
    },
    // 点击取消按钮时
    abrogate() {
      this.popups = false;
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

<style></style>
